<template>
	<div>
		<div class="pt-4" style="width: 100%;background-color: #f5f8fa;">
			<div class="container">
				<div class="row d-flex align-items-start">
					<div class="col-12 col-md-6 mb-4">
						<img class="mb-3 d-flex justify-content-start"
							src="https://www.fluxmq.com/static/img/logo1.90ade0fa.svg" alt="">
						<div class="text-left">
							FluxMQ是一款高性能，云原生的物联网接入网关，专为物联网、工业互联网、IT运维监控等场景设计并优化，具有极强的弹性伸缩能力，高并发，低延迟。能大幅度的减小物联网系统搭建过程中的复杂度，降低研发和运维成本，是一个物联网平台的基础且重要的组件。
						</div>
						<div class="container my-4 d-none d-md-block p-2"
							style="background-image: url(https://www.fluxmq.com/static/img/footer-bg1.efc8fe86.png);background-size: 100% 100%;">
							<div class="row rounded-pill ">
								<div class="col p-0  m-0" v-for="(item, index) in routerList" :key="item.path"
									@click="setActiveRoute(item.path)">
									<router-link class="p-0" :to="item.path"
										:class="{ 'active-route': activeRot === item.path }">{{ item.routerName
										}}</router-link>
									<span class="pl-3" v-if="index !== routerList.length - 1">|</span>
								</div>
							</div>
						</div>
					</div>
					<div class="col-12 col-md-3 d-none d-md-block"></div>
					<div class="col">
						<div class="ml-4 text-left">联系我们</div>
						<div class="d-flex  ">
							<img class="col col-4 col-sm-4 col-md-8 col-lg-8"
								src="https://www.fluxmq.com/static/img/qrcode.e0d5e037.png" alt="">
							<div class="col-4 d-block d-md-none"></div>
							<img class="col col-4 col-sm-4 col-md-8 col-lg-8"
								src="https://www.fluxmq.com/static/img/qrcode2.73793936.png" alt="">
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="card text-center text-light p-0 m-0 d-flex justify-content-center"
			style="position: relative; background-color: #f5f8fa;border: none;">
			<img src=" https://www.fluxmq.com/static/img/btm-bg.7380afdf.svg" class="card-img" alt="...">
			<div class="card-img-overlay text-center" style="">
				<div style="font-size: .7em; position: absolute;bottom: 0px;left: 50%;transform: translate(-50%,0);"
					class="card-title">Copyright
					@2021-2023
					非讯科技 版权所有 | 苏ICP备2023015068号-1
				</div>

			</div>
		</div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			routerList: [
				{ path: '/#/', routerName: '首页' },
				{ path: '/document', routerName: '文档' },
				{ path: '/news', routerName: '新闻' },
				{ path: '/download', routerName: '下载' },
				{ path: '/vision', routerName: '愿景' },
				{ path: '/product', routerName: '产品' },
				{ path: '/cooperation', routerName: '合作' },
			],
			activeRot: '/#/'
		}
	},
	methods: {
		setActiveRoute(path) {
			this.activeRot = path;
		}
	}

}
</script>

<style lang="scss" scoped>
// .router-link-exact-active,
// .router-link-active {
// 	color: #4c93ff;
// }

a {
	font-weight: 400;
	text-decoration: none;
}

.active-route {
	color: #1d6bff;
}

a {
	color: #000;
}

a:hover {
	text-decoration: none;
}
</style>